import { Button } from 'antd'
import ChooseQywxs from '@/desktop/components/ChooseQywxs'
import { useChoosingData } from '@/desktop/logics/config-choosing-qywxs'
import { type EditingQywx } from '.'
import './ChooseQywxs.module.less'

export default function EditChooseQywxs(props: {
  qywxs: EditingQywx[]
  wxids: string[]
  choosed: (wxids: string[]) => void
}) {
  const { qywxs, wxids: initialWxids, choosed } = props
  const { choosedWxids, setChoosedWxids, choosingData, disabledWxids } = useChoosingData(
    qywxs,
    initialWxids,
  )

  return <div styleName="choose-qywxs">
    <div styleName="describe">选择企微账号以对其所在的群进行批量加人。</div>

    <ChooseQywxs
      data={choosingData}
      disabledWxids={disabledWxids}
      choosed={choosedWxids}
      setChoosed={setChoosedWxids}
      qywxExtra={renderQywxExtra}
    />

    <footer>
      <Button type="primary" disabled={!choosedWxids.length} onClick={() => choosed(choosedWxids)}>
        下一步
      </Button>
    </footer>
  </div>
}

function renderQywxExtra(qywx: EditingQywx) {
  return <div styleName="status">
    {qywx.used ? <span>(加人中)</span> : qywx.offline ? <span>(已离线)</span> : null}
  </div>
}
